import { Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useEffect, useState } from 'react';
import { FieldsGrid, TitleGrid } from '../stores/definitions_task';
import { useStore } from '@/hooks';
import SurchargesFieldsGrid from './SurchargesFieldsGrid';

const RoadDetailInfo = (props) => {
  const { formData } = props;
  const { ccOrderStore: store } = useStore();
  const tasks = formData?.taskIds || [];
  const merchantId = formData?.merchant;
  const [tabItems, setTabItems] = useState([]);
  const [merchantIncludeSurKey, setMerchantIncludeSurKey] = useState([]);

  useEffect(() => {
    (async () => {
      const data = [];
      for (const taskId of tasks) {
        const index = tasks.indexOf(taskId);
        const suf = String.fromCharCode((65 + index));
        const res = {
          title: `${suf}段承运信息`,
          key: `${index}`,
          data: {},
        };
        if (tasks.length === 1) {
          res.title = '直达承运信息';
          res.data = formData?.TASK;
        } else {
          const dataTmp = {
            0: formData?.TASK?.fromTask,
            1: formData?.TASK?.toTask,
          };
          res.data = dataTmp[index];
        }
        const curDriverInfo = store.getDriverInfo(res?.data?.driverInfo);
        // eslint-disable-next-line no-await-in-loop
        const taskLog = await store.getTaskLogs(curDriverInfo);
        _.assign(res.data, { DRIVER: curDriverInfo, TASKLOG: taskLog });
        data.push(res);
      }

      if (merchantId) {
        const { operatorSurcharges } = await store.getMerchantInfo(merchantId);
        setMerchantIncludeSurKey(operatorSurcharges);
      }
      setTabItems(data);
    })();
  }, [tasks]);

  return (
    <>
      <Tab
        defaultActiveKey="0"
      >
        {tabItems.map((items, index) => {
          const surcharges = items?.data?.orderBaseModel?.surcharges[0] || {};
          return (
            <Tab.Item
              title={t`${items.title}`}
              key={items.key}
            >
              <div>
                <TitleGrid title={t`派车信息`} />
                <FieldsGrid
                  formData={items.data}
                  mode="view"
                  fields={['driverInfo[0].name', 'driverInfo[0].phone', 'driverInfo[0].licenseNo.mainland', 'driverInfo[0].licenseNo.hk']}
                />
                <TitleGrid title={t`线路信息`} />
                <FieldsGrid
                  formData={items.data}
                  mode="view"
                  fields={['startArea', 'orderBaseModel.beginName', 'endArea', 'orderBaseModel.endName', 'orderBaseModel.predictBeginDate', 'orderBaseModel.predictTime', 'orderBaseModel.mileage']}
                />

                <TitleGrid title={t`费用信息`} />
                <SurchargesFieldsGrid
                  dataSource={surcharges}
                  merchantIncludeSurKey={merchantIncludeSurKey}
                />
              </div>
            </Tab.Item>
          );
        })}
      </Tab>
    </>
  );
};

export default RoadDetailInfo;
